<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../vue.js"></script>
    <style>
        .activated{
            color:red;
        }
    </style>
</head>
<body>
<div id="app">
    <div @click="handleDivClick"
         :class="[activated,activatedOne]"
            >Hello world</div>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
//            isActivated:false
            activated:"",
            activatedOne:"ac"
        },
        methods:{
            handleDivClick: function () {
//                this.isActivated=!this.isActivated;
//                if(this.activated==="activated"){
//                    this.activated=""
//                }else{
//                    this.activated="activated"
//                }
                this.activated=this.activated==="activated"?"":"activated"
            }
        }
    })
</script>
</body>
</html>